<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #all{
      height: 800px;
      width: 100%;
      background-color: bisque;
      padding-top: 200px;
    }
    #care{
      height: 180px;
      width: 150px;
      background-color: aquamarine;
      margin: 0 auto;
      padding-top: 20px;
    }
    #img_div{
      height: 120px;
      width: 100px;
      background-color: white;
      margin: 0 auto;
    }
    #img{
      height: 120px;
      width: 100px;
    }
    #btn_div{
      height: 30px;
      width: 100%;
      background-color: aquamarine;
      margin-top: 20px;
      text-align:center;
    }
    #file{
      position:absolute;
      top:200px;
      z-index:100;
      opacity:0;
      filter:alpha(opacity=0);
      height:150px;
      width:100px;
      readonly:true;
    }
  </style>
</head>
<body>
<div id="all">
  <div id="care">
    <div id="img_div">
      <img id="img" src="/userimg/undefined.jpg"/>
    </div>
    <div id="btn_div">
      <input type="file" id="file" name="file" style="width:200px;" onchange="setImagePreview()"/>
      <button id="upload" class="layui-btn layui-btn-xs" onclick="addInfo()">上传</button>
      <button id="back" class="layui-btn layui-btn-xs" onclick="back()">返回</button>
    </div>
  </div>
</div>

  <script src="./layui/layui.js"></script>
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="js/ajaxfileupload.js" charset="GBK"></script>
  <script type="text/javascript" src="js/jquery.jmpopups.js"></script>
  <script th:inline="javascript">
    function setImg(){
      var imgObjPreview=document.getElementById("img");
      imgObjPreview.src = [[*{session.user.user_img_path}]] + [[*{session.user.user_img_name}]] ;
    }
  </script>
  <script type="text/javascript">
    $(function() {
        init();
    })
    function init() {
      setImg();
    }
    function back(){
      location.href = "backMain";
    }

    function addInfo(){
      var len = $('#file').val().length;
      if(len>0){
        showProcessing("正在上传,请稍等");
        $.ajaxFileUpload({
          url:"ajaxuploadimg", //用于文件上传的服务器端请求地址
          secureuri: false, //一般设置为false
          fileElementId: 'file', //文件控件的id<input type="file" id="file" name="file" />
          dataType:'text',
          success: function (data){ //服务器成功响应处理函数
            hideProcessing();
            alert("上传成功");
            $("#img").attr("src",data);
          },error:function(){
            hideProcessing();
            alert("上传失败");
          }
        });
      }else{
        alert("请先点击默认头像选择新头像.")
      }
    }

    function setImagePreview(){
      //得到上传的文件
      var docObj=document.getElementById("file");
      //得到img图片
      var imgObjPreview=document.getElementById("img");
      if(docObj.files && docObj.files[0]){
        //火狐下，直接设img属性
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
      }else{
        //IE下，使用滤镜
        //alert(docObj.select());
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        var localImagId = document.getElementById("imagediv");
        var ImagId = document.getElementById("img");
        //必须设置初始大小
        localImagId.style.width = "150px";
        localImagId.style.height = "200px";
        ImagId.style.width = "150px";
        ImagId.style.height = "200px";
        //图片异常的捕捉，防止用户修改后缀来伪造图片
        try{
          localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
          localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
        }catch(e){
          alert("您上传的图片格式不正确，请重新选择!");
          return false;
        }
        imgObjPreview.style.display = 'none';
        document.selection.empty();
      }
      return true;
    }

    /**
     * 显示loading画面
     * @param desc
     * @return
     */
    function showProcessing(desc) {
      $("body").append("<div id=\"processingdiv\" style=\"display:none;\"><div class=\"popup\"> <div class=\"popup-body\"><div class=\"loading\"><span>"+desc+"</span></div></div></div></div>");

      $.openPopupLayer({
        name: "processing",
        width: 500,
        target: "processingdiv"
      });
    }

    /**
     * 关闭loading画面
     * @param desc
     * @return
     */
    function hideProcessing() {
      $.closePopupLayer('processing');
      $("#processingdiv").remove();
    }
  </script>
</body>
</html>